<template>
  <div>
    <el-row class="padding-sm items-cente flex">
      <el-col :span="22" style="margin: 0 auto; padding-top: 10px">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>店铺信息</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-main>
      <el-row >
        <el-col :span="24" class="margin-top-xs"> 店铺名称：{{ username }} </el-col>
        <el-col :span="24" class="margin-top-xs"> 店铺地址：{{ address }} </el-col>
        <el-col :span="24" class="flex items-center margin-top-xs">
          店铺头像：<img
            @click="dialogVisible = true"
            :src="dialogImageUrl"
            alt=""
            srcset=""
            style="width: 160px; height: 160px"
          />
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-col>
        <el-col :span="24" class="margin-top-xs"
          ><router-link to="/Seller/setSeller">
            <el-button type="primary" plain> 修改 </el-button></router-link
          ></el-col
        >
      </el-row>
    </el-main>
  </div>
</template>

<script>
import business from "@/utils/business";
export default {
  data() {
    return {
      username: "",
      address: "",
      dialogImageUrl: [],
      dialogVisible: false,
    };
  },
  created() {
    this.getuser();
  },
  methods: {
    // 获取商家信息
    getuser() {
      business
        .showsetSeller({})
        .then((data) => {
          let demo = data.data.data[0];

          if (demo) {
            let image = JSON.parse(demo.image);
            this.dialogImageUrl = image[0].url;
            this.username = demo.username;
            this.address = demo.addres;
          } else {
            this.$message.error("信息有误");
          }
        })
        .catch((error) => {
          return;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>